<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
      function isFunction(value) {
        return typeof value === "function";
      }
      Vue.use = function (plugin) {
        //获取当前Vue已经安装的插件的数组
        const installedPlugins =
          this._installedPlugins || (this._installedPlugins = []);
        //如果此插件已经安装过了，则直接返回
        if (installedPlugins.indexOf(plugin) !== -1) {
          return this; // this是Vue类
        }
        //获取传递给use的参数
        var args = Array.prototype.slice.call(arguments, 1);
        //向数组的头部添加Vue类
        args.unshift(Vue);
        //判断如果插件的install属性是一个函数的话
        if (isFunction(plugin.install)) {
            //调用插件的install方法
          plugin.install.apply(plugin, args);
          //再判断一下插件本身是一个函数的话
        } else if (isFunction(plugin)) {
            //调用插件方法
          plugin.apply(null, args);
        }
        //把这个新 插件添加到已经安装的插件数组中
        installedPlugins.push(plugin);
        return this;//Vue
      };
      const MyPlugin1 = {
        install(Vue, options) {
          //给Vue类的原型上扩展方法$myMethod1
          Vue.prototype.$myMethod1 = function () {
            console.log(`this is my myMethod1`,options);
          };
        },
      };
      const MyPlugin2 = function (Vue, options) {
        //给Vue类的原型上扩展方法$myMethod2
        Vue.prototype.$myMethod2 = function () {
          console.log(`this is my myMethod2`,options);
        };
      };
      Vue.use(MyPlugin1, { name: "plugin1" })
      .use(MyPlugin2, {
        name: "plugin2",
        age: 18,
      });
      var vm = new Vue({
        el: "#app",
      });
      vm.$myMethod1();
      vm.$myMethod2();
    </script>
  </body>
</html>
